<template>
    <div class="back_contain_n mine-account">
        <div class="title">单客户年度交货数据</div>
        <div class="Search_Top_Part">
            <el-form inline="true">
				<el-form-item label="">
					<el-select v-model="year" placeholder="" @change="hancleChange" class="formItem">
						<el-option v-for="item in yearsList" :key="item" :label="item" :value="item"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item class="formList" prop="name" >
					<el-autocomplete
					class="formItem"
						v-model="customer"
						:fetch-suggestions="querySearch"
						placeholder="请输入客户名称"
						:disabled="type == 'see'"
						value-key="customer"
					>
						<template slot="default" slot-scope="{item}">
							{{ item.customer}}
						</template>
					</el-autocomplete>
				</el-form-item>
                <el-form-item label="">
                    <div class="search_bt">
                        <span @click="getList" class="zll-search" >搜索</span>
                        <span @click="exportExcel" class="zll-search edit" style="margin-left: 20px"><i class="el-icon-download"></i>
                            下载</span>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <div v-if="flag">
             <div class="dateBox">
				 <div>年度：{{year}}</div>
				 <div>客户名称：{{customer}}</div>
				 <div>查询时间：{{currentTime}}</div>
            </div>

            <div class="echartsBox">
				<MyEcharts :params="tableData"></MyEcharts>
            </div>

            <div class="zll-table">
                <el-table :data="tableData" style="width: 100%" border>
                    <el-table-column label="月份" prop="month" align="center"></el-table-column>
                    <el-table-column label="伸缩(万支)" prop="ss" align="center"></el-table-column>
                    <el-table-column label="多支(万支)" prop="dz" align="center"></el-table-column>
                    <el-table-column label="U型(万支)" prop="ux" align="center"></el-table-column>
                    <el-table-column label="单支(万支)" prop="dzlp" align="center"></el-table-column>
                    <el-table-column label="月度全品合计(万支)" prop="monthlyTotal" align="center"></el-table-column>
                </el-table>
            </div>

        </div>

        <div v-else>
            <div class="empty">
                <img src="@/assets/back_manage_img/zwsj.png" />
                请输入条件进行查询
            </div>

        </div>
		<form action="/jinl/orderStatistics/exportCustomerDelivery" method="post"
			  style="display: none;" ref="downloadContentFile" >
			<input name="queryJson" :value="queryJson"/>
		</form>
    </div>
</template>

<script>
    import MyEcharts from "./myEcharts.vue";
	import {getStore} from "@/plugins/localStore";
    export default {
        components: { MyEcharts },
        data() {
            return {
				queryJson:'',
				year: '',
				yearsList: [],
				customer: '',
                tableData: [],
                flag: false,
				currentTime: this.formatTime(new Date())
            };
        },
        methods: {
			getList(startIndex, pageRow) {
				if (!this.customer) {
					this.$message.error('请输入客户名称');
					return;
				}
				if (!this.year) {
					this.$message.error('请选择年份');
					return;
				}
				let self = this;
                self.flag = true;
				self.tableLoading = true;
				self.$http({
					url: "/jinl/orderStatistics/customerDelivery",
					method: "post",
					data: JSON.stringify({year:this.year, customer: this.customer}),
					dataType: 'json',
					contentType: "application/json",
				}).then(resp => {
					if (resp.success) {
						self.tableLoading = false;
						self.tableData = resp.result.monthlyData;
						self.tableData.push({
							month:'年合计(万支)',
							ss:resp.result.annualData.ssAnnualTotal,
							dz:resp.result.annualData.dzAnnualTotal,
							ux:resp.result.annualData.uxAnnualTotal,
							dzlp:resp.result.annualData.dzlpAnnualTotal,
							monthlyTotal:resp.result.annualData.annualTotal,
						})
						
						// 更新查询时间
						self.currentTime = this.formatTime(new Date());
					}
				});

			},
			querySearch(queryString,cb) {
				let self = this;
				let param = queryString;
				return new Promise((resolve, reject) => {
					self.$http({
						url: "/jinl/order/getNameByQuery",
						method: "post",
						data: JSON.stringify(param),
						dataType: 'json',
						contentType: "application/json",
					}).then(resp => {
						if (resp.success) {
							const customers = resp.result.map(item => ({
								customer: item.customer,
								value: item.customer,
							}));
							cb(customers);
							resolve(customers); // 将处理后的客户数据传递给 resolve 函数
						} else {
							reject(); // 如果请求失败，可以调用 reject 函数处理错误
						}
					}).catch(error => {
						reject(error); // 如果请求发生错误，可以通过 reject 函数传递错误信息
					});
				});
			},
			exportExcel(){
				let user = getStore();
				let self = this;
				let queryForm = {
					year: this.year,
					name:user.userName,
					customer:this.customer,
				};
				queryForm.name = encodeURIComponent(queryForm.name);
				queryForm.customer = encodeURIComponent(queryForm.customer);
				self.queryJson = JSON.stringify(queryForm);
				self.$nextTick(() => {
					self.$refs.downloadContentFile.submit();
				})
			},
			hancleChange(){
				this.getList();
			},
			getRecentYears(count) {
				const current = new Date().getFullYear();
				return Array.from({ length: count }, (_, i) => (current - (count - 1) + i));
			},
			formatTime(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
        },
		mounted() {
			// let self = this;
			// self.getList();
		},
		created() {
			this.yearsList = this.getRecentYears(3);
			this.year = this.yearsList[this.yearsList.length - 1];
		},
    };
</script>

<style lang="scss" scoped>
    @import "@/style/SearchTop.scss";

    .title {
        font-size: 24px;
        text-align: center;
        margin-bottom: 30px;
    }

    .formItem {
        ::v-deep .el-input__inner {
            width: 200px !important;
            text-align: center;
        }

    }

    .search_bt {
        height: 40px;
        display: flex;
        align-items: center;
    }
     .dateBox {
        display: flex;
        align-items: center;
        font-size: 14px;
        padding-left: 15px;
        color: #666;
        margin-top: 10px;
        margin-bottom: 20px;

        div {
            margin-right: 100px;
        }
    }
    .echartsBox {
        width: 100%;
    }

    .zll-table {
        margin-top: 30px;

        .el-table th {
            font-size: 12px;
        }

        .el-table__cell {
            .el-tag {
                width: 60px;
                height: 26px;
                line-height: 26px;
                padding: 0;

                &.cancel_tag {
                    background: #fff;
                    border-color: #eee;
                    color: #ccc;
                }
            }
        }

        &.inspect-box_table {
            .el-table .cell {
                span {
                    &.ws {
                        margin: 0 1px;
                        color: #4caf50;
                    }

                    &.abnormal1 {
                        color: #fb2516;
                    }

                    &.abnormal2 {
                        color: #fb2516;
                    }
                }
            }
        }
    }
	.empty{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 50px 0;
        color: #5e6d82;
        font-size: 14px;
        img{
            width: 200px;
        }
        
    }
</style>